<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="../vuejs/vue.js"></script>
    <template id="my-app">
        <!-- 1.lazy -->
        <!-- <input type="text" v-model.lazy="messge">
               <h2>{{messge}}</h2> -->
               <!-- 2.number -->
               <!-- <input type="number" v-model="messge"> -->
               <!-- <input type="text" v-model.number="messge">
               <button @click="getType">查看类型</button> -->
               <!-- 3.trim -->
               <input type="text" v-model.trim="messge">
               <button @click="getResult">查看结果</button>
    </template>
    <script>
        Vue.createApp({
            template:`#my-app`,
            data(){
                return{
                    messge:'hello word'
                }
            },
            methods:{
                getType(){
                    console.log(this.messge,typeof(this.messge));
                },
                getResult(){
                    console.log(this.messge);
                }
            }

        }).mount('#app')
    </script>
</body>
</html>